<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRoomDetail } from '../../api/hotel'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()
const roomId = route.params.id as string

// 房间信息
const room = ref<any>({})
// 加载状态
const loading = ref(false)

// 获取房间详情
const fetchRoomDetail = async () => {
  try {
    loading.value = true
    const res = await getRoomDetail(roomId)
    room.value = res.data || {}
  } catch (error: any) {
    showToast(error.message || '获取房间详情失败')
  } finally {
    loading.value = false
  }
}

// 预订房间
const bookRoom = () => {
  router.push(`/order/${roomId}`)
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 页面初始化
onMounted(() => {
  fetchRoomDetail()
})
</script>

<template>
  <div class="room-detail-container">
    <van-nav-bar
      title="房间详情"
      left-arrow
      @click-left="goBack"
    />
    
    <div class="loading-container" v-if="loading">
      <van-loading type="spinner" />
    </div>
    
    <template v-else>
      <!-- 房间基本信息 -->
      <div class="room-info">
        <!-- <van-image
          width="100%"
          height="200"
          :src="room.image"
          fit="cover"
        /> -->
        <div class="room-name">{{ room.name }}</div>
        <div class="room-price">￥{{ room.price }}/晚</div>
        
        <div class="room-facilities">
          <div class="section-title">类型</div>
          <div class="facilities-list">
            <van-tag plain type="primary" class="facility-tag" >{{ room.roomType }}</van-tag>
          </div>
        </div>

        <div class="room-facilities">
          <div class="section-title">状态</div>
          <div class="facilities-list">
            <van-tag plain type="primary" class="facility-tag" >{{ room.status }}</van-tag>
          </div>
        </div>



      </div>
      
      <!-- 预订按钮 -->
      <div class="book-action">
        <van-button type="primary" block round @click="bookRoom">
          立即预订
        </van-button>
      </div>
    </template>
  </div>
</template>

<style scoped>
.room-detail-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 80px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.room-info {
  background-color: #fff;
  padding-bottom: 16px;
}

.room-name {
  padding: 16px 16px 8px;
  font-size: 18px;
  font-weight: bold;
}

.room-price {
  padding: 0 16px 8px;
  font-size: 16px;
  color: #ee0a24;
  font-weight: bold;
}

.room-description {
  padding: 0 16px 16px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.room-facilities {
  padding: 0 16px;
}

.section-title {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: bold;
}

.facilities-list {
  display: flex;
  flex-wrap: wrap;
}

.facility-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.book-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
</style> 